<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;padding: 0;
		}
		div{
			width: 200px;height: 200px;background: cyan;position: absolute;left: 0;
		}
	</style>
</head>
<body>
	<div id="box"></div>
</body>
<script src="tween.js"></script>
<script type="text/javascript">
	var box = document.getElementById('box');
	var timer = null;

	var t=0,//当前时间
		b=100,//初始值
		c=400,//改变量
		d=200;//持续时间

	// function boxRun(){

	// 	t++;//做自增运算

	// 	if (t<=d) {
	// 		setTimeout(boxRun,100);
	// 	}

	// 	box.style.left = Tween.Back.easeOut(t,b,c,d)+'px';
	// }
	// boxRun();
	
	document.onclick = function(){

		clearInterval(timer);

		timer = setInterval(function(){
			if (t>=d) {
				clearInterval(timer);
				timer = null;
				// return;
			}

			box.style.left = Tween.Back.easeOut(t,b,c,d)+'px';

			t++;
		},10);

	}

</script>
</html>







